<template>
  <div class="recommendation">
    <div class="swiper">
      <el-carousel :interval="4000" type="card" height="22rem">
        <el-carousel-item v-for="item in banners" :key="item.imageUrl">
          <img :src="item.imageUrl" alt="" @click="sendPlaylistData(item)" />
          <span>{{ item.typeTitle }}</span>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="recommendResource">
      <h2 class="iconfont">推荐歌单</h2>
      <ul class="flex">
        <li @click="recommendSongs">
          <div>
            <span>{{ dateNow }}</span>
          </div>
          <h3>每日歌曲推荐</h3>
        </li>
        <li v-for="item in recommendation" :key="item.picUrl">
          <div>
            <img :src="item.picUrl" alt="" />
          </div>
          <h3>{{ item.name }}</h3>
        </li>
      </ul>
    </div>

    <div class="exclusiveDelivery">
      <h2 class="iconfont">独家放送</h2>
      <ul class="flex justify-between">
        <li v-for="item in privatecontent" :key="item.picUrl">
          <div><img :src="item.picUrl" alt="" /></div>
          <h3>{{ item.name }}</h3>
        </li>
      </ul>
    </div>

    <div class="latestMusic">
      <h2 class="iconfont">最新音乐</h2>
      <ul class="flex justify-between">
        <li class="flex" v-for="item in latestMusic" :key="item.al.picUrl">
          <div><img :src="item.al.picUrl" alt="" /></div>
          <div>
            <h3>{{ item.al.name }}</h3>
            <p>{{ item.ar[0].name }}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="recommendMV">
      <h2 class="iconfont">推荐MV</h2>
      <ul class="flex justify-between">
        <li v-for="item in mv" :key="item.picUrl">
          <div><img :src="item.picUrl" alt="" /></div>
          <h3>{{ item.name }}</h3>
          <p>{{ item.artistName }}</p>
          <span class="iconfont">{{ item.playCount }}</span>
        </li>
      </ul>
    </div>

    <div class="podcast">
      <h2 class="iconfont">播客</h2>
      <ul class="flex justify-between">
        <li v-for="item in podcast" :key="item.picUrl">
          <div><img :src="item.picUrl" alt="" /></div>
          <h3>{{ item.name }}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import API from "../../library/axios/api";
import { methods } from "./methods";
export default {
  name: "Recommendation",
  data() {
    return {
      recommendation: [],
      banners: [],
      privatecontent: [],
      latestMusic: [],
      mv: [],
      podcast: [],
    };
  },
  computed: {
    dateNow() {
      return new Date().getDate();
    },
  },
  created() {
    localStorage.setItem('isRecommendSong', JSON.stringify(false))
    API.banner().then((res) => {
      console.log("-----", res.banners);
      this.banners = res.banners;
    });
    if (this.getCookie("cookie")) {
      API.recommend.resource().then((res) => {
        console.log(res.recommend);
        if (res.recommend.length > 9) {
          res.recommend.length = 9;
        }
        this.recommendation = res.recommend;
      });

      API.recommend.songs().then((res) => {
        console.log(res.data.dailySongs);
        res.data.dailySongs.length = 12;
        this.latestMusic = res.data.dailySongs;
      });

      API.personalized.mv().then((res) => {
        console.log(res.result);
        this.mv = res.result;
        console.log(this.mv);
      });

      API.personalized.privatecontent().then((res) => {
        console.log(res.result);
        this.privatecontent = res.result;
      });

      API.personalized.djprogram().then((res) => {
        console.log(res.result);
        this.podcast = res.result;
      });
    }
  },
  methods,
};
</script>

<style lang="scss" scoped>
@import "./_Recommendation.scss";
</style>